@import 'variables';
@import 'mixins';

.touch-management-content {
    margin-top: 10px;
    background-color: #fff;
}

.touch-management-nav {
    font-size: @font-size-small;
    line-height: 60px;
    color: @text-base-color;
    border-bottom: 1px solid @border-color;
    > ul {
        display: flex;
        display: -webkit-flex;
        overflow-x: scroll;
        ::-webkit-scrollbar {
            display: none;
        }
        > li {
            flex-grow: 1;
            min-width: 102px;
            padding-left: 25px;
            padding-right: 25px;
            text-align: center;
            > a {
                display: block;
                border-bottom: 2px solid transparent;
            }
            &.active {
                > a {
                    color: @theme-bg-color;
                    border-color: @theme-bg-color;
                }
            }
        }
    }
}

.touch-management-message {
   > .touch-management-inner {
       position: relative;
       padding-left: 100px;
       border-bottom: 1px solid @border-color;
       & .touch-management-time {
           position: absolute;
           left: 0;
           top: 35px;
           width: 100px;
           font-size: @font-size-small;
           color: @text-base-color;
           text-align: center;
           &:after {
               position: absolute;
               right: -6px;
               top: 8px;
               content: '';
               width: 10px;
               height: 10px;
               background-color: @theme-bg-color;
               border-radius: 100%;
           }
       }
       > .touch-management-list {
           padding: 30px 20px 20px 30px;
           border-left: 1px solid @border-color;
           border-bottom: 1px solid @border-color;
       }
   }
}

.overflow-text {
    font-size: @font-size-small;
    color: @text-base-color;
    line-height: 36px;
    .overflowHidden(3);
}

.touch-management-image {
    margin-top: 20px;
    margin-bottom: 20px;
    & dd {
        float: @float-left;
        > img {
            height: 140px;
            margin-right: 10px;
            margin-bottom: 10px;
        }
    }
}

.touch-management-comment {
    > .touch-manage-eva {
        float: @float-left;
        > a {
            display: inline-block;
            margin-right: 35px;
            padding-left: 40px;
            font-size: @font-size-low;
            line-height: 40px;
            color: @text-base-color;
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 30px auto;
            &:nth-child(1) {
                background-image: url(../images/icon/comment-icon1.png);
            }
            &:nth-child(2) {
                background-image: url(../images/icon/comment-icon2.png);
            }
        }
    }
    > .touch-manage-del {
        float: @float-right;
        > span {
            height: 20px;
            margin-left: 20px;
            padding: 10px 15px;
            font-size: @font-size-min;
            line-height: 20px;
        }
    }
}

.touch-management-character {
    margin-bottom: 20px;
    & dt {
        position: relative;
        display: inline-block;
        > img {
            width: 240px;
            height: 180px;
        }

        &.active {
            > .select-img {
                display: block;
            }
        }
    }
    & dd {
        display: inline-block;
        margin-left: 30px;
        vertical-align: top;
        > h3 {
            padding-left: 40px;
            font-size: @font-size-big;
            color: @text-dec-color;
            background-image: url(../images/icon/sex-icon-male.png);
            background-position: left center;
            background-repeat: no-repeat;
            background-size: 26px auto;
        }
        > p {
            margin-top: 15px;
            font-size: @font-size-small;
            color: @text-gray-color;
        }
        > span {
            display: block;
            margin-top: 15px;
            font-size: @font-size-small;
            color: @text-dec-color;
        }
    }
}